<template>
    <div class="app-container">
        <div class="head">
            <img src="@/assets/img/Layout/position.png" />
            <p class="see-block">购物车</p>
        </div>
        <div class="view-container">
            <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                    <el-button
                        class="btn-delete"
                        type="primary"
                        size="mini"
                        @click="clearAll()"
                    >清空购物车</el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button
                        class="btn-success"
                        type="primary"
                        size="mini"
                        @click="confirm()"
                    >立即申请</el-button>
                </el-col>
            </el-row>
            <el-table :data="list" @selection-change="handleSelectionChange" border>
                <el-table-column type="selection" width="35" align="center" />
                <el-table-column label="序号" type="index" align="center" width="50">
                    <template slot-scope="scope">
                        <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="产品名称"  align="center" prop="productName" />
                <el-table-column label="产品编码" align="center" prop="productCode" />
                <el-table-column label="产品规格" align="center" prop="specification" />
                <el-table-column label="数量" align="center" prop="num">
                    <template slot-scope="scope">
                        <el-input-number v-model="scope.row.num" :min="1" @change="val => handleChange(val, scope.row)"></el-input-number>
                    </template>
                </el-table-column>
                <el-table-column label="价格" align="center" prop="untaxedAmount" />
                <el-table-column label="金额" align="center" prop="amount" />
                <el-table-column label="操作" align="center" width="150px;" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="text"
                            class="btn-delete-color"
                            icon="el-icon-delete"
                            @click="handleDelete(scope.row)"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination
                v-show="total > 0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
            />
        </div>
    </div>
</template>

<script>
import { cartList, cartEdit, cartDel, cartDelAll, cartConfirm } from "@/api/system/basedata/productCollection/productCollection"
import { detailConfig } from "@/api/system/setting/config/config"
export default {
    name: "list",
    data() {
        return {
            // 总条数
            total: 0,
            // 列表数据
            list: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10
            },
            ids: [],
            form: {
                purchaseOrderProductList:[]
            },
            config: '', // 1 销售订单 0 采购订单
        }
    },
    created() {
        this.getList()
        this.getConfig()
    },
    methods: {
        // 获取参数配置详情
        getConfig(){
            detailConfig('generatePurchaseOrder', 'shoppingMall').then(res => {
                if(res.data.length > 0){
                    this.config = res.data[0].ifAllow
                }
            })
        },
        // 获取列表
        getList() {
            cartList(this.addDateRange(this.queryParams)).then(res => {
                this.list = res.rows
                this.total = res.total
            })
        },
        // 数量更改
        handleChange(val, row){
            let obj = {
                id: row.id,
                num: val,
                amount: Number(val) * Number(row.untaxedAmount)
            }
            cartEdit(obj).then(res => {
                this.getList()
            })
        },
        // 删除产品
        handleDelete(row){
            this.$modal.confirm('是否确认删除？').then(() => {
                cartDel(row.id).then(() => {
                    this.getList()
                    this.$modal.msgSuccess("删除成功!")
                }).catch(() => {})
            })
        },
        // 清空购物车
        clearAll(){
            this.$modal.confirm('是否清空购物车？').then(() => {
                cartDelAll().then(() => {
                    this.getList()
                    this.$modal.msgSuccess("操作成功!")
                }).catch(() => {})
            })
        },
        // 选中产品
        handleSelectionChange(row) {
            this.ids = row.map(item => item)
        },
        // 确认购买
        confirm(){
            const ids = JSON.parse(JSON.stringify(this.ids))
            this.form.purchaseOrderProductList = ids
            if(ids.length > 0){
                // console.log(this.form)
                cartConfirm(this.form).then(res => {
                    this.$modal.msgSuccess("操作成功!")
                    if(this.config == '0'){
                        this.$router.push({path:"/purchase/purchaseOrder/list"})
                    }else{
                        this.$router.push({path:"/sales/salesOrder/list"})
                    }
                })
            }else{
                this.$modal.msgError('请选择要购买的产品！')
            }
        }
    }
}
</script>

<style scoped>
::v-deep .el-input-number--medium{
    width: auto;
    margin-top: 10px;
}
</style>